<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>车辆列表 - 公共交通异常检测系统</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/vehicle-list.css">
  <link rel="icon" href="./img/logo_nobackground.png" type="image/png">
</head>
<body>
  <div id="app">
    <!-- 加载遮罩 -->
    <transition name="fade">
      <div v-if="loading" class="loading-overlay">
        <div class="loading-content">
          <div class="loading-spinner">
            <i class="el-icon-loading"></i>
          </div>
          <div>{{ loadingText }}</div>
        </div>
      </div>
    </transition>

    <!-- 主框架 -->
    <div class="admin-layout" v-show="!loading">
      <!-- 顶部导航栏 -->
      <header class="admin-header">
        <div class="header-left">
          <div class="logo-section">
            <img :src="logoUrl" alt="公共交通异常检测系统" class="header-logo" @error="handleLogoError">
            <h1 class="system-title">公共交通异常检测系统</h1>
          </div>
          <div class="breadcrumb-section">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item><a href="index.html">首页</a></el-breadcrumb-item>
              <el-breadcrumb-item>车辆管理</el-breadcrumb-item>
              <el-breadcrumb-item>车辆列表</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>

        <div class="header-right">
          <!-- 通知 -->
          <el-badge :value="notificationCount" class="notification-badge">
            <el-button type="text" @click="showNotifications">
              <i class="el-icon-bell"></i>
            </el-button>
          </el-badge>

          <!-- 用户菜单 -->
          <el-dropdown @command="handleUserCommand" class="user-dropdown">
            <div class="user-info">
              <el-avatar :size="32" :src="userInfo.avatar" icon="el-icon-user-solid"></el-avatar>
              <span class="username">{{ userInfo.username }}</span>
              <i class="el-icon-arrow-down"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="profile">
                <i class="el-icon-user"></i> 个人信息
              </el-dropdown-item>
              <el-dropdown-item command="settings">
                <i class="el-icon-setting"></i> 系统设置
              </el-dropdown-item>
              <el-dropdown-item divided command="logout">
                <i class="el-icon-switch-button"></i> 退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </header>

      <!-- 主内容区 -->
      <div class="admin-main">
        <!-- 侧边导航 -->
        <aside class="admin-sidebar" :class="{ 'collapsed': sidebarCollapsed }">
          <div class="sidebar-toggle" @click="toggleSidebar">
            <i :class="sidebarCollapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
          </div>

          <el-menu :default-active="activeMenu" :collapse="sidebarCollapsed" @select="handleMenuSelect"
            class="sidebar-menu">
            <el-menu-item index="dashboard">
              <i class="el-icon-data-board"></i>
              <span slot="title">首页</span>
            </el-menu-item>

            <el-submenu index="traffic">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>交通监控</span>
              </template>
              <el-menu-item index="traffic-monitor">实时监控</el-menu-item>
              <el-menu-item index="traffic-analysis">数据分析</el-menu-item>
              <el-menu-item index="traffic-alert">预警管理</el-menu-item>
            </el-submenu>

            <el-submenu index="vehicle">
              <template slot="title">
                <i class="el-icon-truck"></i>
                <span>车辆管理</span>
              </template>
              <el-menu-item index="vehicle-list">车辆列表</el-menu-item>
              <el-menu-item index="vehicle-tracking">车辆追踪</el-menu-item>
              <el-menu-item index="vehicle-maintenance">维护记录</el-menu-item>
            </el-submenu>

            <el-submenu index="data">
              <template slot="title">
                <i class="el-icon-pie-chart"></i>
                <span>数据统计</span>
              </template>
              <el-menu-item index="data-overview">数据概览</el-menu-item>
              <el-menu-item index="data-report">报表生成</el-menu-item>
              <el-menu-item index="data-export">数据导出</el-menu-item>
            </el-submenu>

            <el-menu-item index="system">
              <i class="el-icon-setting"></i>
              <span slot="title">系统管理</span>
            </el-menu-item>
          </el-menu>
        </aside>

        <!-- 内容区域 -->
        <main class="admin-content">
          <!-- 页面头部 -->
          <div class="page-header">
            <div class="header-left">
              <h1>车辆列表</h1>
            </div>
            <div class="header-right">
              <el-button type="primary" @click="addVehicle">
                <i class="el-icon-plus"></i>
                添加车辆
              </el-button>
            </div>
          </div>

          <!-- 车辆概览卡片 -->
          <div class="vehicle-overview">
            <div class="overview-card" v-for="stat in vehicleStats" :key="stat.id">
              <div class="stat-icon" :style="{ backgroundColor: stat.color }">
                <i :class="stat.icon"></i>
              </div>
              <div class="stat-info">
                <h3>{{ stat.value }}</h3>
                <p>{{ stat.label }}</p>
              </div>
            </div>
          </div>

          <!-- 主要内容区 -->
          <div class="main-content">
            <!-- 搜索和筛选 -->
            <div class="filter-section">
              <el-form :inline="true" :model="filterForm" class="filter-form">
                <el-form-item label="车牌号">
                  <el-input v-model="filterForm.plateNumber" placeholder="请输入车牌号"></el-input>
                </el-form-item>
                <el-form-item label="车辆类型">
                  <el-select v-model="filterForm.vehicleType" placeholder="请选择">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="公交车" value="bus"></el-option>
                    <el-option label="出租车" value="taxi"></el-option>
                    <el-option label="网约车" value="ride-hailing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="运行状态">
                  <el-select v-model="filterForm.status" placeholder="请选择">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="正常运行" value="normal"></el-option>
                    <el-option label="已检测异常" value="abnormal"></el-option>
                    <el-option label="暂停服务" value="suspended"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="异常类型">
                  <el-select v-model="filterForm.abnormalType" placeholder="请选择">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="司机疲劳" value="driver-fatigue"></el-option>
                    <el-option label="乘客冲突" value="passenger-conflict"></el-option>
                    <el-option label="超载" value="overload"></el-option>
                    <el-option label="异常停靠" value="abnormal-stop"></el-option>
                    <el-option label="危险驾驶" value="dangerous-driving"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="handleSearch">搜索</el-button>
                  <el-button @click="resetFilter">重置</el-button>
                </el-form-item>
              </el-form>
            </div>

            <!-- 车辆列表 -->
            <div class="vehicle-list-section">
              <el-table :data="vehicleList" style="width: 100%" v-loading="tableLoading">
                <el-table-column prop="plateNumber" label="车牌号" width="120"></el-table-column>
                <el-table-column prop="vehicleType" label="车辆类型" width="100">
                  <template slot-scope="scope">
                    <el-tag :type="getVehicleTypeTag(scope.row.vehicleType)">
                      {{ getVehicleTypeName(scope.row.vehicleType) }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="line" label="线路/区域" width="120"></el-table-column>
                <el-table-column prop="status" label="运行状态" width="100">
                  <template slot-scope="scope">
                    <el-tag :type="getStatusTag(scope.row.status)">
                      {{ getStatusName(scope.row.status) }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="abnormalType" label="异常类型" width="120">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.abnormalType" :type="getAbnormalTypeTag(scope.row.abnormalType)">
                      {{ getAbnormalTypeName(scope.row.abnormalType) }}
                    </el-tag>
                    <span v-else>-</span>
                  </template>
                </el-table-column>
                <el-table-column prop="lastLocation" label="最后位置" width="180"></el-table-column>
                <el-table-column prop="lastUpdate" label="最后更新" width="180"></el-table-column>
                <el-table-column prop="driver" label="当前驾驶员" width="120"></el-table-column>
                <el-table-column label="操作" width="250" fixed="right">
                  <template slot-scope="scope">
                    <el-button size="mini" @click="viewDetails(scope.row)">详情</el-button>
                    <el-button size="mini" type="warning" @click="handleAlert(scope.row)" v-if="scope.row.status === 'abnormal'">处理异常</el-button>
                    <el-button size="mini" type="primary" @click="editVehicle(scope.row)">编辑</el-button>
                  </template>
                </el-table-column>
              </el-table>

              <div class="pagination-container">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>

    <!-- 通知抽屉 -->
    <el-drawer title="系统通知" :visible.sync="notificationDrawer" direction="rtl" size="400px">
      <div class="notification-list">
        <div class="notification-item" v-for="notification in notifications" :key="notification.id">
          <div class="notification-content">
            <h4>{{ notification.title }}</h4>
            <p>{{ notification.content }}</p>
            <span class="notification-time">{{ notification.time }}</span>
          </div>
          <el-button type="text" @click="markAsRead(notification.id)">
            <i class="el-icon-check"></i>
          </el-button>
        </div>
      </div>
    </el-drawer>

    <!-- 添加/编辑车辆对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px">
      <el-form :model="vehicleForm" :rules="rules" ref="vehicleForm" label-width="100px">
        <el-form-item label="车牌号" prop="plateNumber">
          <el-input v-model="vehicleForm.plateNumber"></el-input>
        </el-form-item>
        <el-form-item label="车辆类型" prop="vehicleType">
          <el-select v-model="vehicleForm.vehicleType" placeholder="请选择">
            <el-option label="小型车" value="small"></el-option>
            <el-option label="中型车" value="medium"></el-option>
            <el-option label="大型车" value="large"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="品牌型号" prop="brand">
          <el-input v-model="vehicleForm.brand"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="vehicleForm.status" placeholder="请选择">
            <el-option label="在线" value="online"></el-option>
            <el-option label="离线" value="offline"></el-option>
            <el-option label="维修中" value="maintenance"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="当前驾驶员" prop="driver">
          <el-input v-model="vehicleForm.driver"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </span>
    </el-dialog>

    <!-- 车辆详情对话框 -->
    <el-dialog title="车辆详情" :visible.sync="detailsVisible" width="800px">
      <div class="vehicle-details" v-if="currentVehicle">
        <div class="details-header">
          <div class="vehicle-info">
            <h3>{{ currentVehicle.plateNumber }}</h3>
            <el-tag :type="getVehicleTypeTag(currentVehicle.vehicleType)">
              {{ currentVehicle.vehicleType }}
            </el-tag>
            <el-tag :type="getStatusTag(currentVehicle.status)">
              {{ currentVehicle.status }}
            </el-tag>
          </div>
        </div>
        <el-tabs v-model="activeTab">
          <el-tab-pane label="基本信息" name="basic">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="品牌型号">{{ currentVehicle.brand }}</el-descriptions-item>
              <el-descriptions-item label="当前驾驶员">{{ currentVehicle.driver }}</el-descriptions-item>
              <el-descriptions-item label="最后位置">{{ currentVehicle.lastLocation }}</el-descriptions-item>
              <el-descriptions-item label="最后更新">{{ currentVehicle.lastUpdate }}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="运行记录" name="records">
            <el-timeline>
              <el-timeline-item
                v-for="(record, index) in vehicleRecords"
                :key="index"
                :timestamp="record.time"
                :type="record.type">
                {{ record.content }}
              </el-timeline-item>
            </el-timeline>
          </el-tab-pane>
          <el-tab-pane label="维护记录" name="maintenance">
            <el-table :data="maintenanceRecords" style="width: 100%">
              <el-table-column prop="date" label="维护日期" width="180"></el-table-column>
              <el-table-column prop="type" label="维护类型" width="120"></el-table-column>
              <el-table-column prop="description" label="维护内容"></el-table-column>
              <el-table-column prop="cost" label="费用" width="120"></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          // 加载状态
          loading: true,
          loadingText: '正在加载系统...',
          tableLoading: false,

          // 用户信息
          userInfo: {
            username: '',
            role: '',
            avatar: './img/myphoto2.jpg',
            loginTime: ''
          },

          // 界面状态
          sidebarCollapsed: false,
          activeMenu: 'vehicle-list',
          logoUrl: './img/logo_nobackground.png',

          // 通知相关
          notificationCount: 3,
          notificationDrawer: false,
          notifications: [{
            id: 1,
            title: '系统更新通知',
            content: '系统将在今晚23:00进行维护更新，预计耗时2小时',
            time: '2024-03-15 14:30',
            read: false
          }],

          // 车辆统计
          vehicleStats: [{
            id: 1,
            label: '车辆总数',
            value: '156',
            icon: 'el-icon-truck',
            color: '#409EFF'
          },
          {
            id: 2,
            label: '正常运行',
            value: '128',
            icon: 'el-icon-success',
            color: '#67C23A'
          },
          {
            id: 3,
            label: '已检测异常',
            value: '15',
            icon: 'el-icon-warning',
            color: '#E6A23C'
          },
          {
            id: 4,
            label: '暂停服务',
            value: '13',
            icon: 'el-icon-circle-close',
            color: '#F56C6C'
          }],

          // 筛选表单
          filterForm: {
            plateNumber: '',
            vehicleType: '',
            status: '',
            abnormalType: ''
          },

          // 车辆列表数据
          vehicleList: [{
            plateNumber: '渝A12345',
            vehicleType: 'bus',
            line: '103路',
            status: 'abnormal',
            abnormalType: 'driver-fatigue',
            lastLocation: '重庆市渝中区解放碑',
            lastUpdate: '2024-03-15 10:30:00',
            driver: '王建国'
          },
          {
            plateNumber: '渝A67890',
            vehicleType: 'bus',
            line: '262路',
            status: 'normal',
            abnormalType: '',
            lastLocation: '重庆市北碚区天生路',
            lastUpdate: '2024-03-15 10:35:00',
            driver: '李志强'
          },
          {
            plateNumber: '渝B12345',
            vehicleType: 'taxi',
            line: '北碚区域',
            status: 'abnormal',
            abnormalType: 'passenger-conflict',
            lastLocation: '重庆市北碚区北碚文化中心',
            lastUpdate: '2024-03-15 10:32:00',
            driver: '张明华'
          },
          {
            plateNumber: '渝A78901',
            vehicleType: 'bus',
            line: '188路',
            status: 'normal',
            abnormalType: '',
            lastLocation: '重庆市北碚区北碚图书馆',
            lastUpdate: '2024-03-15 10:38:00',
            driver: '陈永康'
          },
          {
            plateNumber: '渝B23456',
            vehicleType: 'taxi',
            line: '北碚区域',
            status: 'suspended',
            abnormalType: 'dangerous-driving',
            lastLocation: '重庆市北碚区北碚体育馆',
            lastUpdate: '2024-03-15 10:25:00',
            driver: '刘德华'
          },
          {
            plateNumber: 'DIDI78901',
            vehicleType: 'ride-hailing',
            line: '北碚区域',
            status: 'abnormal',
            abnormalType: 'overload',
            lastLocation: '重庆市北碚区北碚火车站',
            lastUpdate: '2024-03-15 10:40:00',
            driver: '赵小川'
          },
          {
            plateNumber: '渝A89012',
            vehicleType: 'bus',
            line: '168路',
            status: 'normal',
            abnormalType: '',
            lastLocation: '重庆市北碚区北碚步行街',
            lastUpdate: '2024-03-15 10:42:00',
            driver: '周长江'
          },
          {
            plateNumber: 'DIDI89012',
            vehicleType: 'ride-hailing',
            line: '北碚区域',
            status: 'abnormal',
            abnormalType: 'abnormal-stop',
            lastLocation: '重庆市北碚区天生丽街',
            lastUpdate: '2024-03-15 10:36:00',
            driver: '杨光明'
          },
          {
            plateNumber: '渝A90123',
            vehicleType: 'bus',
            line: '268路',
            status: 'normal',
            abnormalType: '',
            lastLocation: '重庆市北碚区北碚中学',
            lastUpdate: '2024-03-15 10:45:00',
            driver: '吴成龙'
          },
          {
            plateNumber: '渝B34567',
            vehicleType: 'taxi',
            line: '北碚区域',
            status: 'abnormal',
            abnormalType: 'driver-fatigue',
            lastLocation: '重庆市北碚区北碚科技大学',
            lastUpdate: '2024-03-15 10:33:00',
            driver: '郑家辉'
          }],

          // 分页相关
          currentPage: 1,
          pageSize: 10,
          total: 100,

          // 对话框控制
          dialogVisible: false,
          detailsVisible: false,
          dialogTitle: '添加车辆',
          currentVehicle: null,
          activeTab: 'basic',

          // 表单数据
          vehicleForm: {
            plateNumber: '',
            vehicleType: '',
            brand: '',
            status: '',
            driver: ''
          },

          // 表单验证规则
          rules: {
            plateNumber: [
              { required: true, message: '请输入车牌号', trigger: 'blur' }
            ],
            vehicleType: [
              { required: true, message: '请选择车辆类型', trigger: 'change' }
            ],
            brand: [
              { required: true, message: '请输入品牌型号', trigger: 'blur' }
            ],
            status: [
              { required: true, message: '请选择状态', trigger: 'change' }
            ]
          },

          // 运行记录
          vehicleRecords: [{
            time: '2024-03-15 10:30:00',
            type: 'success',
            content: '车辆启动'
          }],

          // 维护记录
          maintenanceRecords: [{
            date: '2024-03-15',
            type: '常规保养',
            description: '更换机油、机滤',
            cost: '¥800'
          }]
        }
      },

      mounted() {
        this.initSystem();
      },

      methods: {
        // 系统初始化
        async initSystem() {
          try {
            // 检查登录状态
            const authToken = localStorage.getItem('authToken');
            const userInfoStr = localStorage.getItem('userInfo');

            if (!authToken || !userInfoStr) {
              this.$message.warning('请先登录系统');
              setTimeout(() => {
                window.location.href = './login.html';
              }, 1000);
              return;
            }

            // 解析用户信息
            this.userInfo = JSON.parse(userInfoStr);
            this.userInfo.loginTime = localStorage.getItem('loginTime') || new Date().toISOString();

            // 模拟加载过程
            await this.simulateLoading();

            // 加载完成
            this.loading = false;

          } catch (error) {
            console.error('System initialization error:', error);
            this.$message.error('系统初始化失败');
          }
        },

        // 模拟加载过程
        simulateLoading() {
          return new Promise((resolve) => {
            setTimeout(() => {
              resolve();
            }, 1000);
          });
        },

        // 侧边栏切换
        toggleSidebar() {
          this.sidebarCollapsed = !this.sidebarCollapsed;
        },

        // 菜单选择
        handleMenuSelect(index) {
          if (index === 'dashboard') {
            window.location.href = './index.html';
          } else if (index === 'traffic-monitor') {
            window.location.href = './traffic-monitor.html';
          } else if (index === 'traffic-analysis') {
            window.location.href = './traffic-analysis.html';
          } else if (index === 'traffic-alert') {
            window.location.href = './traffic-alert.html';
          } else if (index === 'vehicle-tracking') {
            window.location.href = './vehicle-tracking.html';
          } else if (index === 'vehicle-maintenance') {
            window.location.href = './vehicle-maintenance.html';
          } else if (index === 'data-overview') {
            window.location.href = './data-overview.html';
          } else if (index === 'data-report') {
            window.location.href = './data-report.html';
          } else if (index === 'data-export') {
            window.location.href = './data-export.html';
          } else if (index === 'system') {
            window.location.href = './system-management.html';
          }
        },

        // 用户命令处理
        handleUserCommand(command) {
          switch (command) {
            case 'profile':
              this.$message.info('个人信息功能开发中');
              break;
            case 'settings':
              this.$message.info('系统设置功能开发中');
              break;
            case 'logout':
              this.handleLogout();
              break;
          }
        },

        // 退出登录
        handleLogout() {
          this.$confirm('确定要退出登录吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            localStorage.removeItem('authToken');
            localStorage.removeItem('userInfo');
            localStorage.removeItem('loginTime');
            this.$message.success('已安全退出');
            setTimeout(() => {
              window.location.href = './login.html';
            }, 1000);
          });
        },

        // 显示通知
        showNotifications() {
          this.notificationDrawer = true;
        },

        // 标记为已读
        markAsRead(id) {
          const notification = this.notifications.find(n => n.id === id);
          if (notification && !notification.read) {
            notification.read = true;
            this.notificationCount = Math.max(0, this.notificationCount - 1);
            this.$message.success('已标记为已读');
          }
        },

        // Logo错误处理
        handleLogoError() {
          this.logoUrl = '';
        },

        // 获取车辆类型名称
        getVehicleTypeName(type) {
          const typeMap = {
            'bus': '公交车',
            'taxi': '出租车',
            'ride-hailing': '网约车'
          };
          return typeMap[type] || type;
        },

        // 获取车辆类型标签样式
        getVehicleTypeTag(type) {
          const typeMap = {
            'bus': 'primary',
            'taxi': 'success',
            'ride-hailing': 'info'
          };
          return typeMap[type] || 'info';
        },

        // 获取状态名称
        getStatusName(status) {
          const statusMap = {
            'normal': '正常运行',
            'abnormal': '已检测异常',
            'suspended': '暂停服务'
          };
          return statusMap[status] || status;
        },

        // 获取状态标签样式
        getStatusTag(status) {
          const statusMap = {
            'normal': 'success',
            'abnormal': 'warning',
            'suspended': 'danger'
          };
          return statusMap[status] || 'info';
        },

        // 获取异常类型名称
        getAbnormalTypeName(type) {
          const typeMap = {
            'driver-fatigue': '司机疲劳',
            'passenger-conflict': '乘客冲突',
            'overload': '超载',
            'abnormal-stop': '异常停靠',
            'dangerous-driving': '危险驾驶'
          };
          return typeMap[type] || type;
        },

        // 获取异常类型标签样式
        getAbnormalTypeTag(type) {
          const typeMap = {
            'driver-fatigue': 'danger',
            'passenger-conflict': 'warning',
            'overload': 'warning',
            'abnormal-stop': 'info',
            'dangerous-driving': 'danger'
          };
          return typeMap[type] || 'info';
        },

        // 处理异常
        handleAlert(row) {
          this.$alert(`正在处理 ${row.plateNumber} 的异常情况：${this.getAbnormalTypeName(row.abnormalType)}`, '处理异常', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'success',
                message: '异常处理完成'
              });
            }
          });
        },

        // 搜索
        handleSearch() {
          this.tableLoading = true;
          setTimeout(() => {
            this.tableLoading = false;
            this.$message.success('搜索完成');
          }, 1000);
        },

        // 重置筛选
        resetFilter() {
          this.filterForm = {
            plateNumber: '',
            vehicleType: '',
            status: '',
            abnormalType: ''
          };
        },

        // 添加车辆
        addVehicle() {
          this.dialogTitle = '添加车辆';
          this.vehicleForm = {
            plateNumber: '',
            vehicleType: '',
            brand: '',
            status: '',
            driver: ''
          };
          this.dialogVisible = true;
        },

        // 编辑车辆
        editVehicle(row) {
          this.dialogTitle = '编辑车辆';
          this.vehicleForm = { ...row };
          this.dialogVisible = true;
        },

        // 查看详情
        viewDetails(row) {
          this.currentVehicle = row;
          this.detailsVisible = true;
        },

        // 提交表单
        submitForm() {
          this.$refs.vehicleForm.validate((valid) => {
            if (valid) {
              this.$message.success('保存成功');
              this.dialogVisible = false;
            }
          });
        },

        // 分页相关方法
        handleSizeChange(val) {
          this.pageSize = val;
          this.loadVehicleList();
        },

        handleCurrentChange(val) {
          this.currentPage = val;
          this.loadVehicleList();
        },

        // 加载车辆列表
        loadVehicleList() {
          this.tableLoading = true;
          setTimeout(() => {
            this.tableLoading = false;
          }, 500);
        }
      }
    });
  </script>
</body>
</html>
